<template>
  <div class="look-warp">
    <!-- <video id="videoElement" controls autoplay muted style="width: 100%; height: auto; object-fit: fill"></video> -->
    <easy-player ref="player" id="player1" :video-url="'http://192.168.0.49:8999/live/movie2.m3u8'" isresolution="['yh','fhd','hd','sd']"
      :muted="true" :video-title="'重庆'" show-custom-button style="width: 100%;height: auto" :autoplay="false" @video-url="ces"/>      
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
import { useRoute, useRouter } from 'vue-router'
import flvjs from 'flv.js';
import { message } from 'ant-design-vue';

const router = useRouter()
const route = useRoute()
const flvPlayer = ref<any>(null);

const state = reactive({
  url: ''
})
const ces = (url: any) => {
  console.log(url)
}

const createVideo = (dom: any) => {
  if (flvjs.isSupported()) {
    var videoElement = document.getElementById(dom);
    flvPlayer.value = flvjs.createPlayer(
      {
        type: 'flv',
        url: state.url, //url地址
        isLive: true,
        hasAudio: false,
      }
    );
    flvPlayer.value.attachMediaElement(videoElement);
    flvPlayer.value.load();

    setTimeout(function () {
      flvPlayer.value.play();
    }, 300);
    //处理视频播放错误的语法
    flvPlayer.value.on('error', () => {
      message.error(`视频加载失败，请稍候重试！`);
      return false;
    });
  }
};

onMounted(() => {
  document.title = '实时画面'
  let { playUrl }: any = route.query
  state.url = playUrl
  createVideo('videoElement');
})

onBeforeUnmount(() => {
  flvPlayer.value.pause(); //暂停播放数据流
  flvPlayer.value.unload(); //取消数据流加载
  flvPlayer.value.detachMediaElement(); //将播放实例从节点中取出
  flvPlayer.value.destroy(); //销毁播放实例
  flvPlayer.value = null;
})

</script>
<style scoped lang='less'>
.look-warp {
  width: 100vw;
  height: 100vh;
  background-color: #E5EFF8;
  padding: 20px;
}
</style>